import { onBeforeUnmount, onMounted, ref } from "vue";
import type { Ref } from "vue";

const useWidth = (widthParams: number, heightParams: number): { width: Ref<number>, height: Ref<number> } => {

   const width: Ref<number> = ref<number>(widthParams);

   const height: Ref<number> = ref<number>(heightParams);

   const onResize = () => {
      width.value = window.innerWidth;
      height.value = window.innerHeight;
   };

   onMounted(() => {
      width.value = window.innerWidth;
      height.value = window.innerHeight;
      window.addEventListener("resize", onResize);
   });

   onBeforeUnmount(() => {
      window.removeEventListener("resize", onResize);
   });

   return {
      width,
      height,
   };
};

export default useWidth;
